<template>
  <div class="register-container">
    <h2 class="title">注册新账户</h2>
    <form class="register-form">
      <div class="form-group">
        <label>用户名：</label>
        <input
          type="text"
          placeholder="请输入用户名"
          class="input-field"
          v-model="LoginData.username"
        />
      </div>
      <div class="form-group">
        <label>邮箱：</label>
        <input
          type="email"
          placeholder="请输入邮箱"
          class="input-field"
          v-model="LoginData.email"
        />
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input
          type="password"
          placeholder="请输入密码"
          class="input-field"
          v-model="LoginData.password"
        />
      </div>
      <div class="form-group">
        <label>确认密码：</label>
        <input
          type="password"
          placeholder="请再次输入密码"
          class="input-field"
          v-model="LoginData.confirmpassword"
        />
      </div>
      <button type="button" class="submit-btn" @click="goclick()">
        提交注册
      </button>
    </form>

    <!-- 新增：已有账号提示 -->
    <div class="login-prompt">
      <span>已有账号？</span>
      <a href="#" @click="login" style="text-decoration: none; /* 去除下划线 */"
        >登录</a
      >
    </div>
  </div>
</template>
<script>
import httpsdata from "@/urtil/https";
export default {
  data() {
    return {
      LoginData: {
        username: "",
        email: "",
        password: "",
        confirmpassword: "",
      },
    };
  },
  mounted() {
    this.$router.push("/Register");
  },
  methods: {
    login: function () {
      this.$router.push("/login");
    },
    goclick: function () {
      httpsdata
        .RegisterAll({
          name: this.LoginData.username,
          pwd: this.LoginData.password,
          emails: this.LoginData.email,
        })
        .then((val) => {
          if (val.code === 3) {
            alert(val.msg + "请重新输入用户名");
          } else if (this.LoginData.username == "") {
            alert("用户名" + val.msg);
          } else if (this.LoginData.password == "") {
            alert("密码" + val.msg);
          } else if (this.LoginData.confirmpassword == "") {
            alert("确认密码" + val.msg);
          } else if (
            this.LoginData.confirmpassword != this.LoginData.password
          ) {
            alert("确认密码不一致!");
          } else {
            localStorage.setItem(
              "LoginArr",
              JSON.stringify({
                name: this.LoginData.username,
                password: this.LoginData.password,
              })
            );
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          httpsdata.RegisterErr(err);
        });
    },
  },
};
</script>
<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #e3f2fd 0%, #e8f5f9 100%);
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.register-form {
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}

.register-form:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.input-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #646cff;
  box-shadow: 0 0 8px rgba(100, 108, 255, 0.2);
  outline: none;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #646cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.submit-btn:hover {
  background: #4b52d1;
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(1px);
  background: #3c42b0;
}

/* 新增：已有账号提示样式 */
.login-prompt {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.login-link {
  color: #646cff;
  text-decoration: none;
  margin-left: 5px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: #4b52d1;
  text-decoration: underline;
}
</style>